<template>
  <div>
    <div
      class="forboder"
      v-for="(item, index) in HouseInfoList"
      :key="index"
      @click="
        $router.push({
          name: 'detail',
          params: {
            value: item.houseCode,
          },
        })
      "
    >
      <div class="leaseList">
        <div class="pic">
          <img :src="`http://liufusong.top:8080${item.houseImg}`" alt="" />
        </div>
        <div class="context">
          <div>
            <h3>{{ item.title }}</h3>
          </div>
          <p>{{ item.desc }}</p>
          <div class="tags">
            <span v-for="(tag, index) in item.tags" :key="index">{{
              tag
            }}</span>
          </div>
          <i
            ><b>{{ item.price }}</b
            >元/月</i
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HouseListItem',
  props: {
    HouseInfoList: {
      type: Array,
      default: () => []
    }
  }
}
</script>

<style lang="less" scoped>
.forboder {
  padding: 15px 10px 0;
  .leaseList {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100px;
    padding-bottom: 15px;
    border-bottom: 0.7px solid #ccc;
    .pic {
      width: 106px;
      height: 80px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .context {
      height: 80px;
      margin-left: 15px;
      h3 {
        color: #394043;
        font-size: 15px;
        width: 230px;
        margin-bottom: 5px;
        /* 第一步：让文字强制一行显示 */
        white-space: nowrap;
        /* 第二步：溢出隐藏 */
        overflow: hidden;
        /* 第三步：溢出的内容省略号显示 */
        text-overflow: ellipsis;
      }
      p {
        font-size: 12px;
        color: #afb2b3;
        margin-bottom: 3px;
        width: 230px;
        height: 15px;
      }
      .tags {
        display: flex;
        width: 230px;
        overflow: hidden;
        span {
          display: block;
          height: 22px;
          text-align: center;
          line-height: 22px;
          font-size: 12px;
          color: #39becd;
          background: #e1f5f8;
          border-radius: 3px;
          margin-right: 5px;
        }
      }
      i {
        font-size: 12px;
        color: #fa5741;
        b {
          font-weight: bold;
          font-size: 16px;
        }
      }
    }
  }
}
</style>
